<template>
    <div class="container-box">
        <div style="height: 98px;"></div>
        <!-- serch -->
        <div class="bgfffs filter_box" :style="contentStyleObj">
            <page-filter :className="className" lableWidth="70px" ref="from" :query.sync="filterInfo.query"
                :filter-list="filterInfo.list" :list-type-info="listTypeInfo" @handleClick="handleClick"
                @handleEvent="handleEvent" @upenter="upenter">
            </page-filter>
        </div>

        <div class="bgfff">
            <div class="btn-div" style="margin-left: 10px;">
                <el-button class="btn-middle" type="primary" @click="batchReceive" :disabled="isReceive"
                    size="mini">批量收款{{ isReceive ? "" :
                        Number(this_pay_amount).toFixed(2) }}</el-button>
            </div>
            <div class="tableHeight" ref="tableWrapper" style="padding: 10px 10px">
                <page-table :checkBox="true" :pager="false" ref="table" :tabIndex="true" :dataText="dataText"
                    showRow="receivePage" v-loading="loading" :init-curpage="tableInfo.initCurpage"
                    :data.sync="tableInfo.data" :pageParm="pageParm" :query="filterInfo.query"
                    :field-list="tableInfo.fieldList" :list-type-info="listTypeInfo" :showSummary="showSummary"
                    :getSummaries="getSummaries" :handle="tableInfo.handle" @handleClick="handleClick"
                    @handleEvent="handleEvent">
                    <template v-slot:col-invoice_type="scope">
                        <span v-if="scope.row.invoice_type == 1">
                            专票
                        </span>
                        <span v-else>普票</span>
                    </template>
                    <template v-slot:col-pay_amount="scope">
                        <span v-if="scope.row.pay_amount != 0.00" style="cursor: pointer;"
                            @click="receiveRecord(scope.row)">
                            {{ scope.row.pay_amount }}
                            <img src="@/assets/image/look.png" style="width: 10px;" />
                        </span>
                        <span v-else>-</span>
                    </template>
                </page-table>
            </div>
        </div>
        <page-dialog :class="{ 'dialogCss': dialogInfo.type == 'addReceive' }"
            :title="dialogInfo.title[dialogInfo.type]" :visible.sync="dialogInfo.visible" :width="dialogInfo.width"
            :bt-loading="dialogInfo.btLoading"
            :bt-list="dialogInfo.type === 'addReceive' || dialogInfo.type === 'batchReceive' ? dialogInfo.btList : dialogInfo.btList2"
            shutEvent="close" @handleClick="handleClick" @handleEvent="handleEvent" @closeevent="closeevent">
            <template v-slot>
                <!-- 添加收款 -->
                <div v-if="dialogInfo.type == 'addReceive'" class="moreReceiveCss">
                    <el-form label-position="right" :inline="false" :model="receiveForm" ref="receiveForm"
                        class="driverTable_form" label-width="110px" :rules="rules">
                        <el-form-item label="企业名称：">
                            <span>{{ receiveForm.group_name }}</span>
                        </el-form-item>
                        <el-form-item label="开票企业：">
                            <span>{{ receiveForm.bill_name }}</span>
                        </el-form-item>
                        <el-form-item label="开票金额：">
                            <span>{{ receiveForm.invoice_amount }}</span>
                        </el-form-item>
                        <el-form-item label="税率：">
                            <span>{{ receiveForm.tax_ratio }}</span>
                        </el-form-item>
                        <el-form-item label="总费用：">
                            <span>{{ receiveForm.amount }}</span>
                        </el-form-item>
                        <el-form-item label="已支付：">
                            <span>{{ receiveForm.pay_amount }}</span>
                        </el-form-item>
                        <el-form-item label="本次支付：" prop="now_amount">
                            <el-input v-model="receiveForm.now_amount" type="number" placeholder="请输入本次支付金额"
                                style="width: 120px;"></el-input>
                        </el-form-item>
                        <el-form-item label="支付时间：" prop="pay_date">
                            <el-date-picker v-model="receiveForm.pay_date" type="date" :clearable="false"
                                class="timestyle" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="备注：">
                            <el-input v-model="receiveForm.remark" type="textarea" placeholder="请输入备注"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 收款记录 -->
                <div v-if="dialogInfo.type == 'receiveLog'">
                    <el-table :data="tabItemList" border ref="tabItemList" v-loading="loading" :header-cell-style="{
                        background: 'rgba(238,241,246,1)',
                        fontSize: '12px'
                    }" class="toppp-table" style="width: 100%; font-size: 12px">
                        <el-table-column type="index" align="center" label="序号" width="50">
                        </el-table-column>
                        <el-table-column align="center" prop="amount" label="收款金额">
                        </el-table-column>
                        <el-table-column align="center" prop="pay_date" label="收款时间">
                        </el-table-column>
                        <el-table-column align="center" prop="add_time" label="添加时间" width="150">
                        </el-table-column>
                        <el-table-column align="center" prop="remark" label="备注">
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 批量收款 -->
                <div v-if="dialogInfo.type == 'batchReceive'" class="moreReceiveCss">
                    <el-form ref="moredestroyForm" label-position="right" :rules="rules" :model="batchReceiveForm"
                        :inline="false" class="driverTable_form" label-width="80px">
                        <div style="font-weight: 700; margin-bottom: 20px">
                            确定所选内容均已全部收款？
                        </div>

                        <el-form-item label="支付时间：" prop="pay_date">
                            <el-date-picker v-model="batchReceiveForm.pay_date" type="date" :clearable="false"
                                class="timestyle" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="备注：">
                            <el-input v-model="batchReceiveForm.remark" type="textarea" placeholder="请填写备注"></el-input>
                        </el-form-item>
                    </el-form>
                </div>

            </template>
        </page-dialog>
    </div>
</template>

<script>

import PageDialog from "@/components/PageDialog";
import PageFilter from "@/components/PageFilter/index";
import PageTable from "@/components/PageTable/index";
import { formatter } from "@/utils/index";
import {
    receiveList,// 列表
    getReceiveParam,// 基础参数
    addPayment, //添加付款
    paymentLog,//收款记录
} from '@/api/bill'
export default {
    name: "paymentPage",
    components: {
        PageFilter,
        PageDialog,
        PageTable
    },
    data () {
        return {
            billInfo: [],
            rules: {
                now_amount: [
                    {
                        required: true,
                        trigger: ["blur"],
                        message: "请输入本次付款金额"
                    }
                ],
                pay_date: [
                    {
                        required: true,
                        trigger: ["blur"],
                        message: "请选择本次付款支付时间"
                    }
                ],
            },
            id: null,
            fullYear: new Date().getFullYear(),
            month: new Date().getMonth() + 1,
            loading: false,
            billLading: '',
            addId: [],
            dataText: "",
            enter: {},
            checked: false,
            showSummary: false,
            isReceive: true,
            tax_list: [],//税率可选项
            amount_total: 0,
            pay_amount: 0,
            not_pay_amount: 0,
            apply_amount_total: 0,
            billAmount: 0,
            billTax: '',
            billType: 0,
            this_pay_amount: 0,
            settlement_time: "",
            tabItemList: [],
            contentStyleObj: {
                height: "100%"
            },
            refresh: false,
            relation: false,
            relationMixedCost: [],
            labelPosition: 'right',
            show: false,
            receiveForm: {
                id: "",
                group_name: "",//企业名称
                bill_name: "",//开票公司
                invoice_amount: "",//开票金额
                tax_ratio: "",//税率
                amount: "",//总费用
                pay_amount: "",//已支付
                now_amount: "",//本次支付
                pay_date: "",//支付时间
                remark: '',
            },
            batchReceiveForm: {
                pay_date: "",
                remark: ""
            },//批量收款
            rules: {
                pay_date: [
                    {
                        required: true,
                        message: "请选择日期",
                        trigger: ["change", "blur"]
                    }
                ],
                now_amount: [
                    {
                        required: true,
                        message: "请输入本次支付金额",
                        trigger: ["change", "blur"]
                    }
                ],
                remark: [
                    {
                        required: true,
                        message: "请输入摘要",
                        trigger: ["change", "blur"]
                    }
                ],
            },
            showInvoice: false,
            showReconciliation: false,
            className: "forms",
            // 相关列表
            listTypeInfo: {
                //invoice_class: [], //发票税率
                group_name_list: [], //费用名称
                pay_status_list: [], //任务状态
            },

            // 弹窗相关
            dialogInfo: {
                width: "500px",
                title: {
                    addReceive: "添加收款",
                    receiveLog: "收款记录",
                    batchReceive: "批量收款"
                },
                visible: false,
                type: "",
                btLoading: false,
                btList: [
                    {
                        label: "取消",
                        event: "close",
                        show: true
                    },
                    {
                        label: "确定",
                        type: "primary",
                        event: "save",
                        show: true
                    }
                ],
                btList2: [
                    {
                        label: "关闭",
                        event: "close",
                        show: true
                    }
                ]
            },
            // 过滤相关配置
            filterInfo: {
                query: {
                    group_id: "",
                    settlement_time: "",
                    pay_status: ""
                },
                list: [
                    {
                        type: "select",
                        label: "发布企业",
                        value: "group_id",
                        list: "group_id_list",
                        key: "发布企业"
                    },
                    {
                        type: "month",
                        dateType: "month",
                        format: "yyyy-MM",
                        label: "账单",
                        value: "settlement_time",
                        clearable: false,
                        key: "账单",
                    },
                    {
                        type: "select",
                        label: "状态",
                        value: "pay_status",
                        list: "pay_status_list",
                        key: "状态"
                    },
                    {
                        type: "button",
                        label: "搜索",
                        btType: "primary",
                        event: "search",
                        show: true
                    },
                ]
            },

            // 分页参数
            pageParm: {
                tableHeight: "52vh", // 表格最大高度
                total: 0, // 总条数
                loading: true, // 加载动画
                pagesizes: [20, 50, 100], // 分页数量列表
                query: {
                    // 查询条件
                    // page: 1, // 当前页
                    // limit: 20 // 每页条数
                }
            },
            // 表格相关
            tableInfo: {
                refresh: 1,
                initCurpage: 1,
                data: [],
                fieldList: [
                    { label: "企业名称", value: "group_name", width: "150px", type: "popover" },
                    { label: "状态", value: "pay_status_text", width: "100px" },
                    { label: "开票金额", value: "amount", width: "100px" },
                    { label: "发票税率", value: "tax_ratio", width: "100px" },
                    { label: "类型", value: "invoice_type", width: "100px", type: "slot" },
                    { label: "开票企业", value: "name", type: "popover" },
                    { label: "已收金额", value: "pay_amount", width: "100px", type: "slot" },
                    { label: "剩余金额", value: "not_pay_amount", width: "100px" },
                    { label: "添加时间", value: "add_time", width: "130px" },
                    { label: "业务员", value: "service_staff", width: "100px" },
                ],
                handle: {
                    label: "操作",
                    width: "200px",
                    btList: [
                        {
                            label: "添加收款",
                            type: "text",
                            icon: "el-icon-browse",
                            event: "add",
                            show: true,
                            ifRender: row => {
                                if (row.pay_status == 1) {
                                    return false;
                                } else {
                                    return true;
                                }
                            }
                        },
                    ]
                },
            },
        };
    },
    created () {
        let date = new Date();
        this.settlement_time = date.getFullYear() + "-" + (date.getMonth() + 1);
        this.filterInfo.query.settlement_time = this.settlement_time;
        //this.getonemonth();
        this.init({ ...this.pageParm.query, ...this.filterInfo.query });
        this.getParamList();
        // this.getHeight();
        this.fetTableHeight()
        this.upenter();
        //window.addEventListener("resize", this.getHeight);
    },
    //enter事件 与点击查询按钮功能一致
    updated () {
        var that = this;
    },
    activated () {
        this.init(this.filterInfo.query);
        this.getParamList();
        this.upenter();
        this.refresh = false;
    },
    deactivated () {
        this.refresh = true;
    },
    filters: {
        formatter (time) {
            let date = new Date(time),
                text = "";
            if (time !== "") return (text = formatter(date, "yyyy-MM"));
            return text;
        }
    },
    computed: {
    },


    methods: {
        closeevent () {
            if (this.dialogInfo.type == "addReceive") {
                this.dialogInfo.btList[0].show = true;
                this.dialogInfo.btList[1].show = true;
            }
        },
        receiveRecord (row) {
            this.dialogInfo.width = "700px"
            this.dialogInfo.type = "receiveLog"
            this.dialogInfo.visible = true
            let formData = new FormData();
            formData.append('id', row.id)
            paymentLog(formData).then((res => {
                this.tabItemList = res.data.data;
            }))

        },
        getInvoiceInfo (info) {
            getOuterpointerInvoiceInfo({ id: info.id }).then(res => {
                if (res.data != null) {
                    this.invoice_info = res.data.info;
                    // this.dialogInfo.btList[0].show = false;
                    // this.dialogInfo.btList[1].show = false;
                    this.dialogInfo.type = "invoice_info";
                    this.dialogInfo.width = "500px";
                    this.dialogInfo.visible = true;
                }
            });
        },
        batchReceive () {
            if (this.addId.length == 0) {
                this.$message({ type: "error", message: '请勾选需要添加收款的任务' });
                return
            }
            this.batchReceiveForm.pay_date = this.getCurrentDate(),
                this.dialogInfo.width = "400px"
            this.dialogInfo.type = "batchReceive"
            this.dialogInfo.visible = true;
        },

        //合计
        getSummaries (param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 3) {
                    sums[index] = "合计：";
                    return;
                }
                if (index === 4) {
                    sums[index] = this.amount_total;
                    return;
                }
                if (index === 8) {
                    sums[index] = this.pay_amount;
                    return;
                }
                if (index === 9) {
                    sums[index] = this.not_pay_amount;
                    return;
                }

            });
            this.$nextTick(() => {
                this.$refs.table.$refs.table.doLayout();
                this.$refs.table.$refs.table.bodyWrapper.scrollLeft = 0;
            });
            return sums;
        },
        getApplySummaries (param) {
            console.log('申请开票合计--', param)
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 1) {
                    sums[index] = "合计";
                    return;
                }
                if (index === 5) {
                    sums[index] = this.apply_amount_total;
                    return;
                }
            });

            return sums;
        },

        handleClose (tag) {
            this.relationMixedCost.splice(this.relationMixedCost.indexOf(tag), 1);
            this.billAmount -= tag.amount
        },
        unique (arr) {
            const res = new Map();
            return arr.filter(a => !res.has(a) && res.set(a, 1));
        },
        arrayAminusB (arrA, arrB) {
            return arrA.filter(v => !arrB.includes(v));
        },
        //enter 事件防止全局触发
        upenter () {
            var that = this;
            document.onkeydown = e => {
                //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
                if (e.keyCode === 13 && e.target.baseURI.match("receivableVerification") && !that.showInvoice && !that.showReconciliation && !that.showDestroy && !that.dialogInfo.visible) {
                    console.log("回车事件", that.dialogInfo.visible);
                    //回车后执行搜索方法
                    that.filterInfo.query.page = 1;
                    that.pageParm.query.page = 1;
                    that.init(that.filterInfo.query);
                }
            };
        },
        openWind () {
        },
        getHeight () {
            if (this.contentStyleObj.height == "100%") {
                var height =
                    window.innerHeight - parseInt(this.contentStyleObj.height) - 87;
            } else {
                var height =
                    window.innerHeight - parseInt(this.contentStyleObj.height) - 146;
            }
            this.pageParm.tableHeight = height + "px";
        },
        // 重置table高度
        resetHeight () {
            return new Promise((resolve, reject) => {
                this.tableH = 0
                resolve()
            })
        },
        // 设置table高度
        fetTableHeight () {
            this.resetHeight().then(res => {
                this.pageParm.tableHeight = this.$refs.tableWrapper.getBoundingClientRect().height - 20
                // 设置最小高度，确保表格可以正常显示
                // this.tableH = Math.max(containerHeight - 10, 200); // 最小300px
            })
        },
        //获取本月月初 月末
        // getonemonth() {
        //   var nowDate = new Date();
        //   var fullYear = nowDate.getFullYear();
        //   var month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
        //   var endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天

        //   this.settlement_time =  nowDate.getFullYear() + "-" + (nowDate.getMonth() + 1);
        //   this.filterInfo.query.settlement_time =  nowDate.getFullYear();
        // },
        //格式化年月日
        getFullDate (targetDate) {
            var D, y, m, d;
            if (targetDate) {
                D = new Date(targetDate);
                y = D.getFullYear();
                m = D.getMonth() + 1;
                d = D.getDate();
            } else {
                y = fullYear;
                m = month;
                d = date;
            }
            m = m > 9 ? m : "0" + m;
            d = d > 9 ? d : "0" + d;
            return y + "-" + m + "-" + d;
        },
        init (data) {
            this.loading = true;
            let formData = new FormData();
            formData.append('group_id', data.group_id);
            formData.append('settlement_time', data.settlement_time + "_01");
            formData.append('pay_status', data.pay_status);
            receiveList(formData).then(res => {
                this.showSummary = true;
                this.tableInfo.data = [];
                this.tableInfo.data = res.data.data;
                if (this.tableInfo.data.length === 0) {
                    this.dataText = "暂无数据";
                    this.amount_total = 0.00;
                    this.pay_amount = 0.00;
                    this.not_pay_amount = 0.00;
                }
                this.amount_total = res.data.other.total;
                this.pay_amount = res.data.other.pay_amount;
                this.not_pay_amount = res.data.other.not_pay_amount;
                this.pageParm.total = res.data.total;
                this.loading = false;
            });

        },


        getCurrentDate () {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            const day = String(today.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        getCurrentMonth () {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            return `${year}-${month}`;
        },



        getParamList () {
            getReceiveParam().then(res => {
                let {
                    group_id, //税率
                    pay_status, //任务状态
                } = res.data;
                console.log("基础参数---", res.data)

                group_id = group_id.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });

                pay_status = pay_status.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });

                this.listTypeInfo.group_id_list = group_id;
                this.listTypeInfo.pay_status_list = pay_status;
            });

        },

        handleClick (event, data) {
            console.log('rrrr')
            console.log(event, data);
            switch (event) {
                case "remove":
                    this.relationMixedCost.splice(this.relationMixedCost.indexOf(data), 1);
                    this.billAmount = 0;
                    this.relationMixedCost.forEach((v) => {
                        this.billAmount += + v.amount
                    })
                    break;
                case "close":
                    this.dialogInfo.btLoading = false;
                    this.dialogInfo.visible = false;
                    this.checked = false
                    break;
                case "add":
                    this.receiveForm.id = data.id
                    this.receiveForm.group_name = data.group_name
                    this.receiveForm.bill_name = data.name
                    this.receiveForm.invoice_amount = data.amount
                    let type = data.invoice_type == 1 ? '专票' : '普票'
                    this.receiveForm.tax_ratio = data.tax_ratio + type
                    this.receiveForm.amount = data.amount
                    this.receiveForm.pay_amount = data.pay_amount
                    this.receiveForm.now_amount = ""
                     this.receiveForm.remark = ""
                    this.receiveForm.pay_date = this.getCurrentDate()
                    this.dialogInfo.type = "addReceive";
                    this.dialogInfo.visible = true;
                    this.$nextTick(() => {
                        this.$refs.receiveForm.clearValidate();
                    });
                    break;
                case "confirm":

                    break;
                case "save":
                    if (this.dialogInfo.type == "addReceive") {
                        this.dialogInfo.btLoading = false;
                        let formData = new FormData();
                        formData.append('id', this.receiveForm.id)
                        formData.append('amount', this.receiveForm.now_amount)
                        formData.append('pay_date', this.receiveForm.pay_date)
                        formData.append('remark', this.receiveForm.remark)
                        addPayment(formData).then(res => {
                            if (res.status == 200) {
                                this.$message({
                                    message: res.msg,
                                    type: "success"
                                });
                                this.init(this.filterInfo.query);
                                this.dialogInfo.visible = false;
                            }
                        })
                            .catch(() => {

                            });
                    }
                    if (this.dialogInfo.type == "batchReceive") {
                        this.dialogInfo.btLoading = false;
                        let formData = new FormData();
                        this.addId.forEach(function (value, index) {
                            formData.append(`id[${index}]`, value);
                        });
                        formData.append('pay_date', this.batchReceiveForm.pay_date)
                        formData.append('remark', this.batchReceiveForm.remark)
                        formData.append('type', 1)
                        addPayment(formData).then(res => {
                            if (res.status == 200) {
                                this.$message({
                                    message: res.msg,
                                    type: "success"
                                });
                                this.init(this.filterInfo.query);
                                this.dialogInfo.visible = false;
                            }
                        })
                            .catch(() => {

                            });
                    }
                    break;
                case "search":
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    this.init(this.filterInfo.query);
                    break;
                case "reset":
                    for (let i in this.filterInfo.query) {
                        this.filterInfo.query[i] = "";
                    }
                    this.filterInfo.query.page = 1;
                    this.filterInfo.query.limit = 20;
                    this.pageParm.query.page = 1;
                    this.pageParm.query.limit = 20;
                    let datas = {};
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
            }
        },
        handleEvent (event, data, label) {
            let datas = {};
            switch (event) {
                case "tableCheck":
                    this.addId = [];
                    if (this.addId.length > 0) this.isReceive = false
                    else this.isReceive = true
                    data.forEach(v => {
                        if (v.pay_status == 0) {
                            this.addId.push(v.id);
                            this.isReceive = false
                        }
                    });
                    this.this_pay_amount = 0;
                    var sum = 0;
                    for (let i in data) {
                        sum += Number(data[i].amount);
                    }
                    this.this_pay_amount = parseFloat(sum).toFixed(2);
                    break;
                case "rowClick":
                    break;
                // 分页改变当前页
                case "curPage":
                    if (!data) return;
                    this.pageParm.query.page = data;
                    this.filterInfo.query.page = data;
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                // 分页列表
                case "pageSize":
                    if (!data) return;
                    this.pageParm.query.limit = data;
                    this.filterInfo.query.limit = data;
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                default:
                    break;
            }
        },
        tableHandleEvent (event, data, label) {
            let datas = {};
            switch (event) {
                case "tableCheck":
                    if (data.length > 0) {
                        data.forEach((v) => {
                            if (this.relationMixedCost.length > 0) {
                                let checkStatus = 0;
                                this.relationMixedCost.forEach((item) => {
                                    if (v.task_id + '_' + v.expense_id === item.id) {
                                        checkStatus = 1;

                                    }
                                })
                                if (checkStatus != 1) {
                                    this.relationMixedCost.push({
                                        name: v.bill_lading_number + ' ' + v.amount_type_text + '：' + v.amount,
                                        type: 'info',
                                        task_id: v.task_id,
                                        bill_lading_number: v.bill_lading_number,
                                        container: v.container,
                                        amount_type_text: v.amount_type_text,
                                        amount_type: v.amount_type,
                                        amount: v.amount,
                                        tax_ratio: v.tax_ratio,
                                        id: v.task_id + '_' + v.expense_id,
                                        amount_info_id: v.amount_info_id
                                    })
                                    this.billAmount += +v.amount
                                }
                            } else {
                                this.relationMixedCost.push({
                                    name: v.bill_lading_number + ' ' + v.amount_type_text + '：' + v.amount,
                                    type: 'info',
                                    task_id: v.task_id,
                                    bill_lading_number: v.bill_lading_number,
                                    container: v.container,
                                    amount_type_text: v.amount_type_text,
                                    amount_type: v.amount_type,
                                    amount: v.amount,
                                    tax_ratio: v.tax_ratio,
                                    id: v.task_id + '_' + v.expense_id,
                                    amount_info_id: v.amount_info_id
                                })
                                this.billAmount += +v.amount
                            }

                        })
                    }

                    this.addId = [];
                    if (data.length > 0) {
                        data.forEach((v) => {
                            this.addId.push(v.task_id);
                        })
                    }
                    break;
                case "rowClick":
                    break;
                default:
                    break;
            }
        },
    },
    // destroyed () {
    //     window.removeEventListener("resize", this.getHeight);
    // }
};
</script>
<style lang="scss">
.taskList_box_title {
    padding-bottom: 20px;
    line-height: 40px;
}

.taskList_box {
    width: 600px;
    height: 500px;
    overflow-y: auto;
    border: 1px solid #ddd;
    margin-right: -10px;
    border: 1px solid #ddd;
    line-height: 47px;
    width: 623px;

    .el-col {
        height: 60px;
        line-height: 40px;
        padding: 10px 0;

        .el-input-number {
            width: 140px;
        }
    }
}

.flex-div {
    display: flex;
    /* justify-content: space-between; */
    flex-direction: row;
    align-items: center;
}

.search-div {
    position: relative;
    width: 300px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

/* 去掉input尾部上下小箭头 start */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    -ms-appearance: none !important;
    appearance: none !important;
    margin: 0;
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    -o-appearance: textfield;
    -ms-appearance: textfield;
    appearance: textfield;
}

/* 去掉input尾部上下小箭头 end */
</style>
<style lang="scss" scoped>
.reason {
    padding: 10px;
    border: 1px solid #DADADA;
    border-radius: 4px;
    min-height: 80px;
}

.warnings {
    display: inline-block;
    margin-left: 4px;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.dialogCss {
    ::v-deep .el-dialog__body {
        padding: 10px 20px;
    }
}

.billInfo {
    .item {
        padding: 10px 20px;
        border-radius: 4px;
        font-size: 14px;
        color: #000;
        margin-top: 10px;
    }

    .item_ {
        border: 1px dashed #000;
    }

    .line {
        min-height: 30px;
        line-height: 30px;

        &-title {
            display: inline-block;
            min-width: 80px;
        }
    }
}

.pay_status_text {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    color: #fff;
    cursor: pointer;
    margin-left: 3px;
}

.icon-box {
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;

    span {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        color: #fff;
    }
}

.company {
    ::v-deep .el-radio {
        margin-top: 10px;
    }
}

.filtrate {
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    background-color: #409eff;
    color: #ffffff;
    box-shadow: -1px 1px 4px 0 #f6900f;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 2;
}

.filtrate:hover {
    cursor: pointer;
}

::v-deep .receivable {
    margin-left: 33px;
}

::v-deep .moneycss {
    width: 120px;
}

.editicon:hover {
    cursor: pointer;
}

.imgggcss {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.excelcss:hover {
    cursor: pointer;
}

::v-deep .excelcss>.el-image__inner {
    vertical-align: middle;
}

.salecss {
    white-space: nowrap;
    /*强制span不换行*/
    display: inline-block;
    /*将span当做块级元素对待*/
    width: 60px;
    /*限制宽度*/
    overflow: hidden;
    /*超出宽度部分隐藏*/
    text-overflow: ellipsis;
    /*超出部分以点号代替*/
    line-height: 0.9;
    /*数字与之前的文字对齐*/
}

.salecss:hover {
    cursor: pointer;
}

.recordTable {
    display: flex;
    flex-direction: column;
}

.concatcss {
    padding-top: 10px;
    padding-left: 10px;
    margin-bottom: 20px;
    position: relative;
    margin-top: 10px;
}

.concatcss_line {
    width: 360px;
    border: 1px dashed #c8b9b9;
}

::v-deep.el-form-item {
    margin-bottom: 0px;
}

::v-deep.concatcss>.el-form-item>.el-form-item__label {
    font-size: 12px !important;
}

::v-deep.concatcss>.el-form-item>.el-form-item__content>.el-input>.el-input__inner {
    font-size: 12px !important;
}

::v-deep.concatcss>.el-form-item>.el-form-item__content>.el-input>.el-input__inner,
.concatcss>.el-form-item>.el-form-item__content {
    height: 30px !important;
    line-height: 30px;
}

::v-deep.concatcss>.el-form-item>.el-form-item__content>.el-select>.el-input>.el-input__inner,
.el-form-item__content>.filter-input>.el-input__inner {
    width: 200px;
    height: 30px;
    font-size: 12px !important;
}

.moredestroyCss {
    ::v-deep.el-form-item {
        margin-bottom: 20px !important;
    }

    ::v-deep .el-input {
        width: 240px !important;
    }

    ::v-deep .el-input__inner {
        width: 240px !important;
    }

    .item {
        width: 330px;
        margin-top: 15px;

        &-title {
            font-size: 13px;
            color: #9BA2AA;
            padding-left: 15px;
            padding-bottom: 5px;
        }

        &-main {
            padding: 10px 15px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px dashed #000;

            &-line {
                display: flex;
                align-items: center;
                height: 40px;
                line-height: 40px;
            }

            &-title {
                width: 80px;
                color: #606266;
                font-size: 12px;
                font-weight: 700;

            }

            &-box {
                font-size: 12px;
                color: #606266;

                ::v-deep .el-input__inner {
                    width: 200px !important;
                }

                ::v-deep .el-input {
                    width: 200px !important;
                }
            }
        }
    }
}

.bgfff {
    background: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bgfffs {
    background: #fff;
}

.tableHeight {
    flex: 1;
    box-sizing: border-box;
}

.filter_box {
    position: relative;
    // height: 64px;
    overflow: hidden;
    padding-right: 90px;

    .open {
        position: absolute;
        top: 10px;
        right: 20px;
        color: #409EFF;
        cursor: pointer;
    }
}

.app-main {
    padding-top: 90px !important;
}

.container-box {
    background: #f5f7fa;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

::v-deep .pagination-container {
    margin-top: 0 !important;
}

.moreReceiveCss {
    ::v-deep.el-form-item {
        margin-bottom: 15px !important;
    }

    ::v-deep .el-input {
        width: 240px !important;
    }

    ::v-deep .el-input__inner {
        width: 240px !important;
    }

    .item {
        width: 330px;
        margin-top: 15px;

        &-title {
            font-size: 13px;
            color: #9BA2AA;
            padding-left: 15px;
            padding-bottom: 5px;
        }

        &-main {
            padding: 10px 15px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px dashed #000;

            &-line {
                display: flex;
                align-items: center;
                height: 30px;
                line-height: 30px;
            }

            &-title {
                width: 80px;
                color: #606266;
                font-size: 12px;
                font-weight: 700;

            }

            &-box {
                font-size: 12px;
                color: #606266;

                ::v-deep .el-input__inner {
                    width: 200px !important;
                }

                ::v-deep .el-input {
                    width: 200px !important;
                }
            }
        }
    }
}

::v-deep .el-form-item__error {
    padding-top: 0px;
}
</style>
